<template>
  <div class="app-container" v-loading="loading">
    <el-card class="card">
      <h1>产品管理</h1>
      <el-form :model="queryParams" ref="queryForm" :inline="true" v-show="showSearch">
        <el-form-item>
          <el-button type="primary" icon="el-icon-plus" size="small" @click="handleAdd"
            >创建产品</el-button
          >
        </el-form-item>

        <el-form-item label="" prop="search">
          <el-input
            placeholder="请输入产品名称或型号"
            clearable
            v-model="queryParams.search"
            class="input-with-select"
            size="small"
            @keyup.enter.native="getList"
          >
            <el-button slot="append" icon="el-icon-search" @click="getList"></el-button>
          </el-input>
        </el-form-item>
      </el-form>

      <div v-if="list.length > 0">
        <el-row :gutter="20">
          <el-col
            :xl="6"
            :lg="8"
            :sm="12"
            :xs="24"
            v-for="(item, index) of list"
            :key="index"
          >
            <item :item="item" @handleEdit="handleEdit" @getList="getList" />
          </el-col>
        </el-row>
      </div>
      <el-empty :image-size="200" v-else />

      <!-- 添加或修改用户信息对话框 -->
      <index-edit
        :open="open"
        :title="title"
        @cancel="cancel"
        @getList="getList"
        ref="child"
        :add-type="addType"
        :id="id"
      />
    </el-card>
    <detault-footer />
  </div>
</template>
<script>
import indexEdit from "./components/index/index-edit";
import item from "./components/index/item";

import { productInfoList, addProductInfo } from "@/api/login";
export default {
  name: "Index",
  data() {
    return {
      open: false,
      title: "",
      queryParams: {
        search: "",
      },
      loading: false,
      list: [],
      showSearch: true,
      templates: [],
      addType: "add",
      id: null,
    };
  },
  components: {
    indexEdit,
    item,
  },
  methods: {
    // 获取列表数据
    async getList() {
      try {
        this.loading = true;
        const { queryParams } = this;
        const { data } = await productInfoList(queryParams);
        this.list = data || [];
      } catch (error) {
        console.error("获取产品列表错误", error);
      } finally {
        this.loading = false;
      }
    },
    // 关闭弹窗
    cancel() {
      this.open = false;
      this.reset();
    },
    // 添加产品
    async handleAdd() {
      this.title = "创建产品（SKU）";
      this.reset();
      this.open = true;
      this.addType = "add";
    },
    // 修改产品
    handleEdit(item) {
      this.title = "编辑产品";
      this.reset();
      this.open = true;
      this.addType = "edit";
      this.id = item.id;
    },
    // 表单初始化
    reset() {
      this.$refs.child.resetFormFun();
    },
  },
  mounted() {
    this.getList();
  },
};
</script>
<style lang="scss" scoped>
.card {
  min-height: calc(100vh - 178px);
}
</style>
